@import "../economy/index";

.ix-header {
    .tpl(@height,@padding, @action, @notify, @avatar, @sider) {

        height: unit(@height, px);
        padding: 0 unit(@height / 4, px) 0 0;

        i.trigger {
            .ix-font.x-line(@height);
            .ix-box.in(@padding);
        }


        .tips {
            float: right;
            line-height: unit(@height - 2, px);
        }

        .right {
            // 右上角图标修正高度
            line-height: unit(@height, px) !important;

            .anticon {
                .ix-box.in(@action);
                float: left;
            }

            .notify-notice-button {
                padding: @notify;
            }

            .account {
                .ix-font.line(@height);

                .avatar {
                    .ix-box.out(@avatar);
                }
            }
        }
    }
}

.ix-sider {
    .tpl(@width, @height, @left, @title) {

        .ix-width.x-fixed(@width);
        &-expand {
            .ix-width.x-fixed(@left);
        }
        .ant-menu {

            .ant-menu-submenu-title {
                // 菜单内边距修改
                .ix-box.x-in(0 unit(@title, px))
            }
        }
        .logo {
            .ix-font.line(@height);

            img {
                height: unit(@height, px);
            }

            h1 {
                line-height: unit(@height - 8, px);
            }
        }
    }
    .menu(@indent, @indent2, @indent3,@width) {

        .ant-menu-inline-collapsed {
            width: @width !important;
        }

        .ux-menu {
            // 叶节点优先
            .ant-menu-item {
                padding-left: @indent !important;
            }

            // 分支节点
            .ux-submenu1 {
                .ant-menu-submenu-title {
                    padding-left: @indent !important;
                }

                .ant-menu-item {
                    padding-left: @indent2 !important;
                }

                .ant-menu-submenu {
                    .ant-menu-submenu-title {
                        padding-left: @indent2 !important;
                    }
                }
            }

            .ux-submenu2 {
                .ant-menu-submenu-title {
                    padding-left: @indent3 !important;
                }

                .ant-menu-item {
                    padding-left: @indent3 !important;
                }
            }

            .ant-menu-item, .ant-menu-submenu-title {
                margin: 0 !important;
            }
        }
    }
}

.web-sider-fit {
    // 1280 x 1024
    @media (min-width: @screen-xl) and (max-width: 1400px) {
        .ix-sider.menu(28px, 44px, 60px, 72px);
        .ix-sider.tpl(72, 48, 190, 28);
    }
    // 1400 < x < 1600
    @media (min-width: 1400px) and (max-width: @screen-xxl) {
        .ix-sider.menu(28px, 44px, 60px, 72px);
        .ix-sider.tpl(72, 48, 220, 28);
    }
    // > 1600
    @media (min-width: @screen-xxl) {
        .ix-sider.menu(28px, 52px, 76px, 80px);
        .ix-sider.tpl(80, 56, 240, 32);
    }
}

.web-header-fit {
    // 1024 x 768
    @media (max-width: 1024px) {
        .ix-header.tpl(
                32,
                4px 20px,
                0px 4px,
                8px,
                6px 2px 6px 0,
                72
        );
    }
    // 1280 x 1024
    @media (min-width: 1025px) and (max-width: 1280px) {
        .ix-header.tpl(
                48,
                4px 20px,
                0px 4px,
                8px,
                6px 2px 6px 0,
                72
        );
    }
    // 1366 x 720
    @media (min-width: 1281px) and (max-width: 1366px) {
        .ix-header.tpl(
                48,
                4px 20px,
                0px 4px,
                8px,
                6px 2px 6px 0,
                72
        );
    }
    // 1400 x 900
    @media (min-width: 1367px) and (max-width: 1440px) {
        .ix-header.tpl(
                48,
                4px 20px,
                0px 4px,
                8px,
                6px 2px 6px 0,
                72
        );
    }
    // 1680 x 1050
    @media (min-width: 1441px) and (max-width: 1680px) {
        .ix-header.tpl(
                56,
                4px 24px,
                0px 6px,
                8px,
                12px 4px 12px 0,
                80
        );
    }
    // 1920 x 1200, 1920 x 1080
    @media (min-width: 1681px) {
        .ix-header.tpl(
                56,
                4px 24px,
                0px 6px,
                8px,
                12px 4px 12px 0,
                80
        );
    }
}